<template>
  <div>
    <!-- 集装箱详情 2018/8/15 zhangQ -->
    <div style="padding-bottom: 10px;font-size: 18px;font-weight: 600;">{{ this.tabParam.curPosition }} {{this.tabParam.sendStationName}}{{ this.tabParam.endStationName?('-->' + this.tabParam.endStationName):''}} 集装箱详情</div>
    <Row>
      <i-col>
        <Form ref="tabParam" :model="tabParam" label-position="right" inline>
          <Row>
            <i-col>
              <FormItem label="箱号：">
                <Input type="text" v-model="tabParam.containerNo" clearable placeholder="请输入箱号"></Input>
              </FormItem>
              <FormItem label="箱属：">
                <selectAuto
                  v-model="tabParam.userName" field="containerOwner" label="containerOwner" search-keys="containerOwner,py" :dataList="containerUsersDict" :dropAll="true" :width="200"></selectAuto>
              </FormItem>
              <FormItem label="箱型">
                <selectAuto
                  v-model="tabParam.containerType" field="containerType" label="containerType" search-keys="containerType,py" :dataList="containerTypesDict" :dropAll="true" :width="200"></selectAuto>
              </FormItem>

              <FormItem style="float:right;">
                <Button type="primary" @click="exportThisData">
                  <Icon type="ios-download-outline"></Icon>
                  导出数据
                </Button>
              </FormItem>
              <FormItem style="float:right;">
                <Button type="primary" @click="handleSearch" icon="ios-search">
                  搜索
                </Button>
              </FormItem>

            </i-col>
          </Row>
          <Row>
            <i-col>
              <FormItem label="状态：">
                <Select v-model="tabParam.curStateIds" multiple style="width:200px">
                  <template v-for="item in curStateIdsDict">
                    <Option :value="item.key">{{ item.key }}</Option>
                  </template>
                </Select>
              </FormItem>
              <!--<FormItem label="当前位置：">-->
              <!--<Select v-model="tabParam.curPosition" clearable placeholder="请选择场站站点" style="width: 200px">-->
              <!--<Option v-if="item" v-for="item in stationPositionList" :value="item" :key="item">{{ item }}</Option>-->
              <!--</Select>-->
              <!--</FormItem>-->
              <!--<FormItem label="空重：">-->
              <!--<RadioGroup v-model="tabParam.isEmpty">-->
              <!--<Radio label="">全部</Radio>-->
              <!--<Radio label="0">空</Radio>-->
              <!--<Radio label="1">重</Radio>-->
              <!--</RadioGroup>-->
              <!--</FormItem>-->
            </i-col>
          </Row>
        </Form>
        <tablePage ref="containerDetailsTabRef" :api="getStreamMonitorDataByPage" :param="tabParamDeal" :isStartLoad="false">
          <template slot-scope="props">
            <Table :columns="containerColumn" :data="props.data"></Table>
          </template>
        </tablePage>
      </i-col>
    </Row>

    <!--<xlinkModal v-model="operatModal.trackingShow" title="轨迹查看" width="960">-->
    <!--<trackingShow v-if="operatModal.trackingShow" :subOrder="mainOrderCurrentRow"></trackingShow>-->
    <!--</xlinkModal>-->
    <!--<xlinkModal v-model="operatModal.historyShow" title="历史记录" width="960">-->
    <!--<containerHistory v-if="operatModal.historyShow" :subOrder="mainOrderCurrentRow"></containerHistory>-->
    <!--</xlinkModal>-->
  </div>
</template>

<script>
  import tablePage from '@components/table/tablePage.vue'
  import { getDataByPage, getContainersPositionList, getContainersTypeList } from '@api/containerPlatform/containerManagement'
  import moment from 'moment'
  import _ from 'lodash'
  import { exportUtil } from '@/vendor/exportInvoke'
  import { getStreamMonitorDataByPage } from '@/api/containerPlatform/logistics'
  import containerDictMixins from '../../containerDictMixins'
  import selectAuto from '@/components/selectAuto'

  export default {
    name: 'containerDetails',
    mixins: [containerDictMixins],
    data () {
      let containerTypeList = []
      let containerStateList = []
      let stationPositionList = []
      let tabParam = {
        containerNo: '',
        userName: '',
        containerType: '',
        curStateIds: [],
        curStateId: '',
        curPosition: '',
        isEmpty: ''
      }
      let tabParamDeal = Object.assign({}, tabParam)
      let containerColumn = [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '箱号',
          key: 'containerNo',
          width: 150
        },
        {
          title: '箱属',
          key: 'userName',
          minWidth: 250
        },
        {
          title: '箱型',
          key: 'containerType',
          width: 120
        },
        {
          title: '状态',
          key: 'curStateId',
          width: 100,
          render: (h, params) => {
            let item = params.row
            if (+item.curStateId === 30 || +item.curStateId === 31) {
              return (<span>{'在途'}</span>)
            } else if (+item.curStateId === 80) {
              return (<span>{'出局'}</span>)
            } else if (+item.curStateId !== 99) {
              return (<span>{'站内'}</span>)
            } else {
            }
          }
        },
        {
          title: '在站时长',
          width: 120,
          render: (h, params) => {
            let item = params.row
            if (+item.curStateId === 30 || +item.curStateId === 31) {
              // return (<span>{'在途'}</span>)
            } else if (+item.curStateId === 80) {
              // return (<span>{'出局'}</span>)
            } else if (+item.curStateId !== 99) {
              // 站内
              return (<span>{((+Date.now() - (+moment(item.endStationTime))) / (1000 * 60 * 60)).toFixed(2) + ' h'} </span>)
            } else {
            }
          }
        }
      ]
      let datas = {
        tabParamDeal,
        containerTypeList,
        containerStateList,
        stationPositionList,
        tabParam,
        containerColumn,
        getDataByPage,
        getStreamMonitorDataByPage
      }
      return datas
    },
    props: {
      routerQueryInfo: {},
      stationQuantityWarningInfo: {}
    },
    methods: {
      exportThisData () {
        let param = Object.assign({}, this.tabParamDeal)
        param.pageSize = 0
        param.pageNumber = 0
        getStreamMonitorDataByPage(param)
          .then(res => {
            if (res.data.isSuccess === 1) {
              let rstData = res.data.data.rows
              let result = this.fasetJson(rstData)
              let excelName = ''
              console.log(this.tabParam)
              if (this.tabParam.curPosition === '') {
                excelName = this.tabParam.sendStationName + '-' + this.tabParam.endStationName + '-集装箱详情'
              } else {
                excelName = this.tabParam.curPosition + '-集装箱详情'
              }
              exportUtil.export2Excel(excelName, result.columns, result.data)
            }
          })
      },
      fasetJson (tabData) {
        let index = 0
        tabData.forEach((item) => {
          if (+item.curStateId === 30 || +item.curStateId === 31) {
            item.curStateIdCN = '在途'
          } else if (+item.curStateId === 80) {
            item.curStateIdCN = '出局'
          } else if (+item.curStateId !== 99) {
            item.curStateIdCN = '站内'
          }
          item.endStationTime && (item.atStationTime = ((+Date.now() - (+moment(item.endStationTime))) / (1000 * 60 * 60)).toFixed(2) + ' h')
          item.index = index++
        })
        let result = {
          columns: [
            { type: '序号', key: 'index' },
            { title: '箱号', key: 'containerNo' },
            { title: '箱属', key: 'userName' },
            { title: '箱型', key: 'containerType' },
            { title: '状态', key: 'curStateIdCN' },
            { title: '在站时长', key: 'atStationTime' }
          ],
          data: tabData
        }
        return result
      },
      showTracking (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.trackingShow = true
      },
      showHistory (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.historyShow = true
      },
      handleSearch (param) {
        this.$refs['containerDetailsTabRef'].dataRefresh()
      },
      getContainerStateList () {
        // getStateList().then(res => {
        //   if (res.data.isSuccess === 1) {
        //     this.containerStateList = res.data.data
        //   }
        // })
        getContainersPositionList({ isAll: 0 }).then(res => {
          if (res.data.isSuccess === 1) {
            this.stationPositionList = res.data.data
          }
        })
        getContainersTypeList().then(res => {
          if (res.data.isSuccess === 1) {
            this.containerTypeList = res.data.data
          }
        })
      }
    },
    watch: {
      tabParam: {
        handler (val, oldval) {
          // 处理状态
          let curStateIds = []
          this.tabParam.curStateIds.forEach((item) => {
            let itemObjs = _.find(this.curStateIdsDict, { key: item })
            if (itemObjs && itemObjs.value && itemObjs.value.length > 0) {
              itemObjs.value.forEach((o) => {
                curStateIds.push(o.id)
              })
            }
          })
          let refreshParam = {
            containerNo: this.tabParam.containerNo,
            containerType: this.tabParam.containerTypes, // && this.tabParam.containerTypes.length > 0 ? this.tabParam.containerTypes.join(',') : ''
            curStateId: curStateIds && curStateIds.length > 0 ? curStateIds.join(',') : '',
            userName: this.tabParam.userName,
            curPosition: this.tabParam.curPosition
          }
          this.tabParamDeal = refreshParam
        },
        deep: true
      }
    },
    mounted () {
      this.getContainerStateList()
      // if (this.routerQueryInfo) {
      //   // sendStationName
      //   // endStationName
      //   this.tabParam.sendStationName = this.routerQueryInfo.sendStationName
      //   this.tabParam.endStationName = this.routerQueryInfo.endStationName
      // } else if (this.stationQuantityWarningInfo) {
      //   // sendStationName
      // }
      this.tabParam.curPosition = this.tabParamDeal.curPosition = this.stationQuantityWarningInfo.stationName
      this.getStateListDB()
      this.getContainersTypeListDB()
      this.getContainerOwnerListDB()
      // getStateList()
      //   .then(res => {
      //     if (res.data.isSuccess === 1) {
      //       // 30 31 在途 80出局 其他站内
      //       let stateGroup = _.groupBy(res.data.data, (item) => {
      //         if (+item.id === 30 || +item.id === 31) {
      //           return '在途'
      //         } else if (+item.id === 80) {
      //           return '出局'
      //         } else if (+item.id !== 99) {
      //           return '站内'
      //         } else {
      //           return '99'
      //         }
      //       })
      //       let resData = []
      //       _.forIn(stateGroup, (value, key) => {
      //         if (+key !== 99) {
      //           resData.push({ key: key, value: value })
      //         }
      //       })
      //       this.containerStateList = resData
      //     }
      //   })
      this.$refs['containerDetailsTabRef'].dataRefresh()
    },
    computed: {},
    components: { tablePage, selectAuto }
  }
</script>
<style scoped>
  .lh-32 {
    line-height: 32px;
    margin-right: 5px;
  }
</style>
